<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dickies官方网站</title>
    <link rel="stylesheet" href="header.css">
    <link rel="stylesheet" href="index.css">
    <link rel="shortcut icon" href="../img/logo.ico">

</head>
<style>
    .form_login input {
        width: 500px;
        height: 35px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    /* .form_login p {
        line-height: 30px;
        height: 30px;
    } */
    
    #form_login .short {
        width: 300px;
    }
    
    #form_login span {
        display: inline-block;
        margin-left: 5px;
        width: 80px;
        height: 35px;
    }
    
    #verification_code {
        height: 40px;
        width: 200px;
        background-color: #000;
        color: white;
        border: 1px solid black;
        text-align: center;
    }
    
    #rule {
        width: 30px;
        height: 30px;
        border: 1px solid black;
        margin-left: 5px;
    }
    
    #sign_button {
        background-color: brown;
        color: white;
        font-size: 18px;
    }
    
    #rule-box {
        align-items: center;
    }
</style>

<body>
    <header>

    </header>
    <section>
        <form action="login.php" class="form_login" method="get">
            <h1>用户注册</h1>
            <input type="text" placeholder="手机号(请输入11位手机号)" name="phone" class="input_val"><span></span><br>
            <input type="text" class="input_val" placeholder="8-20位登录密码，必须为数字和字母混合"><span></span><br>
            <input type="text" class="input_val" placeholder="再填写密码" class="short"><span></span><br>
            <input type="text" class="input_val" placeholder="图形验证码(区分大小写)" class="short">
            <span></span>
            <button id="changeCode">看不清？换一个</button><span></span><br>
            <input type="text" class="input_val" placeholder="短信验证码" class="short"><input type="button" class="input_val" id="verification_code" value="获取"></input><span></span>

            <p id="rule-box"><input type="checkbox" id="rule"></input> 我已经阅读并且同意dickies的隐私政策和使用条款</p>
            <input type="button" value="注册" id="sign_button">

        </form>
    </section>
    <footer></footer>
</body>

</html>
<script src="jQuery.js"></script>
<script crossorigin="anonymous" integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ==" src="//lib.baomitu.com/jquery/3.5.1/jquery.js"></script>

<script>
    console.log($("#verification_code"))
    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    var randomCode = function(min, max) {
        var a = Math.round(Math.random() * (max - min) + min);
        return a;
    }
    var spanInner = $("h1").nextAll("span");
    console.log(spanInner.length)
    console.log(spanInner.eq(5).html())
    $("header").load("header.html");
    $("footer").load("footer.html");
    $("document").ready(function() {
        var char = "";
        for (var j = 0; j < 4; j++) {
            char += arr[(randomCode(0, 60))];
        }
        $("h1").nextAll("input").eq(3).next().html(char);
        ($("h1").nextAll("input").eq(3).blur(function() {
            var char = $("h1").nextAll("input").eq(3).next().html();
            console.log(char)
            var code = $(this).val();
            console.log(code)
            if (!code) {
                $(spanInner.eq(3).next().next()).html("请输入验证码").css("color", "red");
            } else if (code == char) {
                $(spanInner.eq(3).next().next()).html("").css("color", "red");

            } else {
                $(spanInner.eq(3).next().next()).html("验证码输入错误,请重新输入").css("color", "red");
                var char = "";
                for (var j = 0; j < 4; j++) {
                    char += arr[(randomCode(0, 60))];
                }
                $("h1").nextAll("input").eq(3).next().html(char);
            }

        }))
    })


    $("h1").nextAll("input").eq(3).next().css("border", "1px solid black")
    console.log($("h1").nextAll("input").eq(3).next());
    ($("h1").nextAll("input").eq(0).blur(
            function() {

                var moblie = /^1[0-9]{10}$/;
                var phone1 = $(this).val();

                if (!phone1) {
                    $(spanInner.eq(0)).html("请输入电话号码").css("color", "red");
                } else if (!moblie.test(phone1)) {
                    $(spanInner.eq(0)).html("请输入正确的电话号码").css("color", "red");
                } else if (!(phone1 == "")) {
                    var xhr = new XMLHttpRequest();
                    xhr.open("get", "sign.php?phone=" + $(this).val(), true)
                    xhr.send();
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            $(spanInner.eq(0)).html(xhr.responseText);
                        } else {
                            $(spanInner.eq(0)).html("");
                        }
                    }


                } else {
                    $(spanInner.eq(0)).html("");
                }
            })


    )
    $("h1").nextAll("input").eq(1).blur(function() {
        var strongRegex = new RegExp("^(?=.*[a-z])(?=.*[0-9]).*$", "g");

        var enoughRegex = new RegExp("(?=.{8,}).*", "g");

        var passWordIn = $(this).val();
        if (!passWordIn) {
            $(spanInner.eq(1)).html("请设置密码").css("color", "red");
        } else if (!strongRegex.test(passWordIn)) {
            $(spanInner.eq(1)).html("密码必须是由数字和字母组成").css("color", "red");
        } else if (!enoughRegex.test(passWordIn)) {
            $(spanInner.eq(1)).html("密码长度不足").css("color", "red");
        } else {
            $(spanInner.eq(1)).html("");
        }
        ($("h1").nextAll("input").eq(2).blur(function() {
            console.log(passWordIn)

            var passWordCheck = $(this).val();
            if (!passWordCheck) {
                $(spanInner.eq(2)).html("输入的密码不一致").css("color", "red");
            } else if (!(passWordIn == passWordCheck)) {
                $(spanInner.eq(2)).html("输入的密码不一致").css("color", "red");
            } else {
                $(spanInner.eq(2)).html("");
            }
        }))

    })

    var arr1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    $("#verification_code").click(function() {
        var num = "";

        var randomCode = function(min, max) {
            var a = Math.round(Math.random() * (max - min) + min);
            return a;
        }
        for (var j = 0; j < 4; j++) {
            num += arr1[(randomCode(0, 9))];


        }
        $("#verification_code").prev().val(num);
    })
    $("#changeCode").click(function() {

            var char = "";
            for (var j = 0; j < 4; j++) {
                char += arr[(randomCode(0, 60))];
            }
            $("h1").nextAll("input").eq(3).next().html(char);
        }


    )

    $("#sign_button").click(function() {
        var spanInner = $("h1").nextAll("span");
        console.log(spanInner)

        for (var i = 0; i < spanInner.length; i++) {
            if (spanInner.val() == " ") {
                location.href = "login.html"

            } else {

                alert("傻瓜，信息没填全")
  break;

            }
        }

    })
</script>